<template>
	<view>

		<form @submit="formSubmit">
			<view class="handleList_box">
				<view class="formAvatar" @click="openUpload">
					<view class="avatarCon">
						<u-avatar :src="avatarUrl" size="200"></u-avatar>
					</view>
					<view class="avatarUpload">
						点击更换头像
					</view>
					<!-- <view class="avatarTips">
						<text>正确的照片类型可以让您的个人主页获得加倍的转发量 建议确保最新的个人主页信息并展示真实的自己。</text>
					</view> -->
				</view>
				
				<!--  -->
				<view class="handleList_con">
					<view class="handleLabel handleLabelMedium">姓名：</view>
					<view class="handleList">
						<view class="pickerCon">
							<input type="text" name="name" :value="userInfo.name"  placeholder="请输入姓名，方便带班正确记工"
								placeholder-class="placeholderColor">
						</view>
					</view>
				</view>
				
				<!-- :value="!userInfo.id_card?'':userInfo.id_card" -->
				<!-- <view class="handleList_con">
					<view class="handleLabel handleLabelMedium">身份证：</view>
					<view class="handleList">
						<view class="pickerCon" >
							<input type="idcard" name="id_card"  :value="userInfo.is_vip_str=='--'?'':userInfo.id_card" placeholder="请输入身份证号" placeholder-class="placeholderColor">
						</view>
					</view>
				</view> -->
				<view class="handleList_con">
					<view class="handleLabel handleLabelMedium">手机号：</view>
					<view class="handleList">
						<view class="pickerCon">
							<input type="number" name="mobile" :value="mobile" placeholder="请输入手机号"
								placeholder-class="placeholderColor">
							<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
								class="getMobile">{{mobile ? '修改':'授权获取'}}</button> -->
						</view>
					</view>
				</view>
				<view class="handleList_con">
					<view class="handleLabel handleLabelMedium">工种：</view>
					<view class="handleList" @click="openProfession">
						<view class="pickerCon">
							<text v-if="profession">{{profession}}</text>
							<text class="placeholderColor" v-else>请选择工种</text>
							<u-icon name="arrow-right" color="#B3B3B3" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="handlePost_con handleFixed">
				<button form-type="submit" hover-class="none" class="completeBtn">保存</button>
			</view>
			<!-- 底部操作 -->
			<!-- #ifdef APP-PLUS -->
			<!-- <view class="handlePost_con handleFixed" v-if="userInfo.is_vip_str=='--'">
				<button form-type="submit" hover-class="none" class="completeBtn">99元实名认证</button>
			</view> -->
			<!-- #endif -->
			
			
		</form>

		<!-- 上传图片组件 -->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>

		<!-- 工种 -->
		<profession ref="profession"></profession>
		
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	import profession from '@/components/profession/profession.vue';
	import {pay} from '@/common/pay.js';
	export default {
		components: {
			Upload,
			profession
		},
		data() {
			return {
				// 用户信息
				userInfo: {
					mobile: '',
					id_card:'',
				},

				// 上传图片
				isUpload: false, //是否打开上传图片
				avatarUrl: '',
				avatarId: '',
				
				// 工种
				profession: '',

				// 表单
				formData: {
					mobile: '',
					id_card:'',
				},
				mobile: '',
			}
		},
		onLoad() {},
		onShow() {

		},
		onReady() {
			var _this = this;
			_this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				var _this = this;
				_this.$u.get('/api/user.index/getDetail', {}).then(res => {
					uni.hideLoading();
					console.log("==获取用户信息==");
					console.log(res);
					_this.userInfo = res.data;
					uni.setStorageSync('userInfo', res.data);
					_this.formData.id_card=_this.userInfo.id_card
					
					// 头像
					if (res.data.header_img_url) {
						_this.avatarUrl = res.data.header_img_url;
						_this.avatarId = res.data.header_img;
					}
					
					_this.mobile = res.data.mobile;
					
					// 工种
					_this.profession = res.data.profession;
				}).catch(res => {
					console.log(res);
				})
			},

			// 获取手机号
			getPhoneNumber(e) {
				var _this = this;
				_this.$u.post('/api/plus.weixin/getWxMobile', e.detail).then(res => {
					console.log("==获取手机号结果==");
					console.log(res.data.phoneNumber);
					_this.userInfo.mobile = res.data.phoneNumber;
					_this.mobile = res.data.phoneNumber;
					console.log(_this.userInfo.mobile);
					_this.$forceUpdate();
				}).catch((res) => {
					console.log(res);
				})
			},

			// 打开工种弹出框
			openProfession() {
				this.$refs.profession.addShow = true;
			},

			/**
			 * 上传图片 start
			 */
			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},

			// 获取上传的图片
			getImgsFunc(e) {
				console.log("==获取上传的图片==");
				console.log(e);
				let _this = this;
				if (e && typeof(e) != 'undefined') {
					_this.avatarUrl = e[0].url;
					_this.avatarId = e[0].imgID;
				}
				_this.isUpload = false;
			},
			/**
			 * 上传图片 end
			 */

			// 提交
			formSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;
				console.log(formData);
				
				// if (!_this.avatarId) {
				// 	uni.showModal({
				// 		content: '请上传头像',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }

				if (!formData.name) {
					uni.showModal({
						content: '姓名不能为空',
						showCancel: false,
					})
					return;
				}

				if (!formData.mobile) {
					uni.showModal({
						content: '电话不能为空',
						showCancel: false,
					})
					return;
				} else {
					var testMobile = _this.$u.test.mobile(formData.mobile);
					// console.log(testMobile)
					if (testMobile == false) {
						uni.showModal({
							content: '你输入的电话格式不正确',
							showCancel: false,
						})
						return;
					}
				}
				// if (!_this.profession) {
				// 	uni.showModal({
				// 		content: '工种不能为空',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }
				_this.formData = formData;
				_this.$u.throttle(_this.submitForm, 3000);
			},

			// 提交接口
			submitForm() {
				var _this = this;
				_this.$u.post('/api/user.index/add_do', {
					header_img: _this.avatarId,
					name: _this.formData.name,
					mobile: _this.formData.mobile,
					profession: _this.profession,
					id_card:_this.formData.id_card,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
					// _this.buyMeal();
				}).catch(res => {
					console.log(res);
				})
			},
			
			buyMeal(){
				var _this = this;
				_this.$u.post('/api/plus.meal/add_order', {
					id:1
				}).then(res => {
					console.log('======res====')
					console.log(res)
					
					pay(res, _this, function() {
						
						_this.getUserInfo();
						setTimeout(function() {
							// _this.getUserInfo()
							uni.navigateBack()
						}, 3000);
					}, function() {
						
					});
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.formAvatar {
		padding-top: 100rpx;
	}
	
	.avatarCon {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.avatarUpload {
		width: 100%;
		font-size: 28rpx;
		color: #666;
		text-align: center;
		padding: 40rpx 0;
		overflow: hidden;
	}
	
	.avatarTips {
		padding: 0 80rpx 50rpx;
		text-align: center;
		overflow: hidden;
	}
	
	.avatarTips text {
		font-size: 22rpx;
		color: #999;
	}
	
	.pickerCon{
		position: relative;
	}
	.pickerCon input{
		width: 100%;
	}

	.getMobile {
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: $uni-color-active;
		background: #f0f6ff;
		border: 2rpx solid #cce0ff;
		box-sizing: border-box;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		right: 20rpx;
		top: 15rpx;
		z-index: 99;
	}

</style>
